<template>
    <div class="nav">
        <el-menu
            background-color="#4A9CF8"
            text-color="#fff"
            active-text-color="#ffd217"
            :unique-opened="true"
            :default-active="$route.fullPath"
            router
            v-if="role == 0"
        >
            <el-menu-item index="/index">
                <img src="~asic/nav_4.png" class="icon">
                <span slot="title" class="title">首页</span>
            </el-menu-item>
            <el-submenu v-for="(item,index) in admin" :key="index" :index="index+''">
                <template slot="title">
                    <img :src="item.icon" class="icon">
                    <span>{{item.title}}</span>
                </template>
                <el-menu-item v-for="(itea,indea) in item.childrens" :key="indea" :index="itea.router"><span class="er_title">{{itea.title}}</span></el-menu-item>
            </el-submenu>
        </el-menu>

        <el-menu
            background-color="#4A9CF8"
            text-color="#fff"
            active-text-color="#ffd217"
            :unique-opened="true"
            :default-active="$route.fullPath"
            router
            v-if="role == 1"
        >
            <el-menu-item index="/index">
                <img src="~asic/nav_4.png" class="icon">
                <span slot="title" class="title">首页</span>
            </el-menu-item>
            <el-submenu v-for="(item,index) in teacher" :key="index" :index="index+''">
                <template slot="title">
                    <img :src="item.icon" class="icon">
                    <span>{{item.title}}</span>
                </template>
                <el-menu-item v-for="(itea,indea) in item.childrens" :key="indea" :index="itea.router"><span class="er_title">{{itea.title}}</span></el-menu-item>
            </el-submenu>
        </el-menu>
    </div>
</template>

<script>
    export default {
        name: 'WebNav',
        props: {
            role: Number
        },
        data() {
            return {
                admin: [{
                    icon: require('asic/nav_0.png'),
                    title: '课题管理',
                    childrens: [
                        { router: '/index/topic_list',title: '课题列表' },
                        { router: '/index/topic_type',title: '课题分类' },
                        { router: '/index/topic_process',title: '课题审核' },
                    ]
                },{
                    icon: require('asic/nav_1.png'),
                    title: '教师管理',
                    childrens: [
                        { router: '/index/teacher_list',title: '教师列表' },
                        { router: '/index/teacher_station',title: '职位管理' },
                        { router: '/index/teacher_add',title: '注册教师' },
                    ]
                },{
                    icon: require('asic/nav_2.png'),
                    title: '学生管理',
                    childrens: [
                        { router: '/index/student_list',title: '学生列表' },
                        { router: '/index/student_class',title: '系部班级' }
                    ]
                },{
                    icon: require('asic/nav_3.png'),
                    title: '公告管理',
                    childrens: [
                        { router: '/index/notice_list',title: '公告列表' },
                        { router: '/index/add_notice',title: '发布公告' }
                    ]
                }
                // ,{
                //     icon: require('asic/nav_3.png'),
                //     title: '答辩管理',
                //     childrens: [
                //         { router: '/index/dabianShenhe',title: '答辩审核' },
                //     ]
                // }
                ],
                teacher: [{
                    icon: require('asic/nav_0.png'),
                    title: '课题模块',
                    childrens: [
                        { router: '/index/topic_list',title: '课题列表' },
                        { router: '/index/my_topic',title: '我的课题' },
                        { router: '/index/release_topic',title: '发布课题' }
                    ]
                },{
                    icon: require('asic/nav_2.png'),
                    title: '学生模块',
                    childrens: [
                        { router: '/index/student_order',title: '学生预约' },
                        { router: '/index/student_weekly',title: '学生周报' },
                        { router: '/index/student_file',title: '学生文件' }
                    ]
                },{
                    icon: require('asic/nav_3.png'),
                    title: '公告模块',
                    childrens: [
                        { router: '/index/notice_list',title: '公告列表' },
                        { router: '/index/add_notice',title: '发布公告' }
                    ]
                }
                // ,{
                //     icon: require('asic/nav_3.png'),
                //     title: '答辩模块',
                //     childrens: [
                //         { router: '/index/dabian',title: '答辩申请' },
                //     ]
                // }
                ],
            };
        },
    };
</script>

<style lang="less">
    @import "asle/index.less";
    .nav {
        .w(100%);
        .mar_t(30px);
        .icon {
            .size(30px);
            .mar_r(8px);
        }
        .el-menu {
            .no_bor();
        }
        // 首页菜单样式
        .title {
            .font(16px);
        }
        // 一级菜单样式
        .el-submenu__title {
            .font(16px);
        }
        // 二级菜单样式
        .er_title {
            .mar_l(18px);
            .font(16px);
        }
        // 右侧箭头
        .el-submenu__icon-arrow {
            .c(white);
            .font(14px);
        }
    }
</style>